<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>充值</title>
    <link
            href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"
            rel="stylesheet"
    />
    <style>
        body {
            background: #f2f2f2;
            color: #333;
        }

        .page__hd {
            padding: 20px;
        }

        .page__title {
            text-align: left;
            font-size: 20px;
            font-weight: 600;
        }

        .page__desc {
            margin-top: 5px;
            color: red;
            text-align: left;
            font-size: 14px;
        }

        .page_help {
            color: rgb(150, 146, 146);
            padding: 20px;
            float: right;
        }

        .weui-cells {
            margin-top: 0;
        }

        button[disabled] {
            opacity: 0.7;
        }

        .gift {
            background: red;
            margin-left: 10px;
            color: #fff;
            padding: 2px 4px;
            font-size: 14px;
            border-radius: 4px;
            font-weight: bold;
        }

        .weui-btn {
            background: #333 !important;
        }

        .weui-cells_radio .weui-check:checked+.weui-icon-checked:before {
            color: #333;
        }
    </style>


    <script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
</head>

<body>
<div class="container" id="container">
    <div class="page home js_show">
        <div class="page__hd">
            <h1 class="page__title">充值积分</h1>
        </div>
        <div class="page__bd">
            <div class="weui-cells__title">充值选择</div>
            <div class="weui-cells weui-cells_radio">
                <label class="weui-cell weui-check__label" for="x1">
                    <div class="weui-cell__bd">
                        <p>5元 = 80积分
                            <span class="gift">入门选择(预计可省40元)</span>
                        </p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" class="weui-check" name="radio" id="x1" value="1"/>
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>
            </div>

            <div class="weui-cells weui-cells_radio">
                <label class="weui-cell weui-check__label" for="x2">
                    <div class="weui-cell__bd">
                        <p>10元 = 160积分
                            <span class="gift">主流选择(预计可省80元)</span>
                        </p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" class="weui-check" name="radio" checked="checked" id="x2" value="2"/>
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>
            </div>
            <div class="weui-cells weui-cells_radio">
                <label class="weui-cell weui-check__label" for="x3">
                    <div class="weui-cell__bd">
                        <p>20元 = 360积分
                            <span class="gift">主流选择(预计可省180元)</span>
                        </p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" class="weui-check" name="radio" id="x3" value="3"/>
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>
            </div>

            <div class="weui-btn-area">
                <button class="weui-btn weui-btn_primary" onclick="fun()" id="charge">立即充值</button>
            </div>
        </div>
    </div>
    <div style="padding: 15px; font-size: 14px;">
        <p>1. 请关注我们的公众号：<span style="text-decoration: underline;" class="gzh">内部福利中心</span>，方便参与更多活动。
        </p>
        <p>2. 积分可用于本公众号提供的所有活动，概不退款。</p>
        <input id="openId" name="openId" type="hidden" th:value="${openId}">
    </div>
</div>
</body>
</html>
<script>
    wx.ready(function() {
        wx.hideOptionMenu();
    });
    function fun(){
        var type = $("input[name=\"radio\"]:checked").val();
        var openId = $("#openId").val();
        $.post('/nbflzx_create_pay',{"openId":openId,"priceId":type},function (str) {
            var data = JSON.parse(str);
            function onBridgeReady(){
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', {
                        "appId":data.appId,     //公众号名称，由商户传入
                        "timeStamp":data.timeStamp,         //时间戳，自1970年以来的秒数
                        "nonceStr":data.nonceStr, //随机串
                        "package":data.package,
                        "signType":data.signType,
                        "paySign":data.paySign //微信签名
                    },
                    function(res){
                        if(res.err_msg == "get_brand_wcpay_request:ok" ){
                            // 使用以上方式判断前端返回,微信团队郑重提示：
                            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                        }
                    });
            }
            if (typeof WeixinJSBridge == "undefined"){
                if( document.addEventListener ){
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                }else if (document.attachEvent){
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            }else{
                onBridgeReady();
            }
        })
    }

</script>

